import React, { useState } from 'react'
import { Button, Input, Toast } from 'antd-mobile'
import { useNavigate, useLocation, useParams } from 'react-router-dom'
import { dosendmsgcode, docheckcode } from '@/api/regist';

type Props = {}

// 调用接口发送手机短信

export default function Step2({ }: Props) {
    const [value, setValue] = useState('')
    const navigate = useNavigate();
    const loc = useLocation();
    const [flag, setflag] = useState<boolean>(true)
    console.log('loc', loc);
    const tel = loc.state.tel;
    return (
        <div>
            <p>注册第二步</p>
            <div>
                <span>短信验证码</span>
                <Input
                    placeholder='请输入内容'
                    value={value}
                    onChange={val => {
                        if (/^\d{5,6}$/.test(val)) {
                            setflag(false)
                        } else {
                            setflag(true)
                        }
                        setValue(val)
                    }}
                />
                <Button onClick={() => {
                    dosendmsgcode({ tel: tel }).then(res => {
                        console.log('res1', res);
                        if (res.data.code == '200') {
                            Toast.show({
                                content: '验证码发送成功',
                                duration: 1000
                            })
                        }

                    })
                }}>发送短信验证码</Button>
                <Button color='danger' disabled={flag} onClick={
                    () => {
                        // 验证短信验证码是否正确
                        docheckcode({ tel: tel, telcode: value }).then(res => {
                            console.log('res2', res);

                            if (res.data.code == 200) {
                                // 跳转到步骤3
                                navigate('/regist/step3', {
                                    state: { tel: tel }
                                })
                            }

                        })
                    }
                }>下一步</Button>
            </div>
        </div>
    )
}